<template>
  <div class="app-container disf dirc" style="box-sizing: border-box">
    <!-- Step1 基础信息 -->
    <BaseInfo ref="baseInfoRef" v-if="curStep == 0" :id="contractId" @next="handleCancel" />
    <!-- Step2 合同填写 -->
    <Temp ref="tempRef" v-if="curStep == 1" :id="contractId" @next="handleCancel" />
    <!-- Step3 套餐材料 -->
    <Material ref="materialRef" v-if="curStep == 2" :id="contractId" @next="handleCancel" />
    <!-- 操作按钮 -->
    <div class="mt20 disf juc">
      <el-button type="primary" class="ml15" @click="handleSubmit">提交</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import BaseInfo from "./components/baseInfo.vue";
import Temp from "./components/temp.vue";
import Material from "./components/material.vue";
import { useTagsViewStore } from "@/store";

defineOptions({
  name: "ContractEdit",
  inheritAttrs: false,
});

const route = useRoute();
const tagsViewStore = useTagsViewStore();

const curStep = ref(0); //当前步骤
const contractId = ref(""); //合同id

const baseInfoRef = ref();
const tempRef = ref();
const materialRef = ref();

onActivated(() => {
  if (route.query.id == contractId.value && parseInt(route.query.step as string) == curStep.value)
    return;
  // id变动 重置数据
  contractId.value = route.query.id as string;
  curStep.value = parseInt(route.query.step as string) || 0;
});

/**
 * 取消
 */
function handleCancel() {
  tagsViewStore.closeCurrentView();
}

/**
 * 提交
 */
function handleSubmit() {
  switch (curStep.value) {
    case 0:
      // 第一步：提交基础信息，获取id
      baseInfoRef.value.handleSubmit();
      break;
    case 1:
      // 第2步：提交合同文本
      tempRef.value.handleSubmit();
      break;
    case 2:
      // 第3步：提交材料
      materialRef.value.handleSubmit();
      break;
  }
}
</script>

<style lang="scss" scoped></style>
